<template>
  <div class="home">
    <el-row class="header_top">
      <el-col :span="12" class="height_gao">
        <div class="grid-content bg-purple  height_gao">
          <el-button type="success" class="subang" @click="bodyaudh(1,2)" plain>已支付</el-button>
          <el-button type="warning" class="subang" @click="bodyaudh(1,1)" plain>未支付</el-button>
        </div>
      </el-col>
      <el-col :span="12" class="height_gao">
        <div class="grid-content bg-purple-light height_gao">
          <!--<el-button type="success" class="allith2" @click="export2Excel">-->
            <!--导出订单信息-->
          <!--</el-button>-->
        </div>
      </el-col>
    </el-row>

    <div class="autd animated slideInRight">
      <el-table :data="datatitle" border style="width: 100%" v-loading="loading2" element-loading-text="拼命加载中">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.info" style="width: 100%;float:left;" v-loading="loading2"
                      element-loading-text="拼命加载中">
              <el-table-column prop="goods_name" label="商品名称" width="200">
              </el-table-column>
              <el-table-column prop="class_name" label="商品图片 " width="280">
                <template slot-scope="scope">
                  <img :src="urlimg+scope.row.thumbnail" class="img_"/>
                </template>
              </el-table-column>
              <el-table-column prop="pivot.goods_num" label="商品数量" width="200">
              </el-table-column>
              <el-table-column prop="price" label="商品单价" width="200">
              </el-table-column>
              <el-table-column prop="" label="小计" width="200">
                <template slot-scope="scope">
                  <span>{{scope.row.price * scope.row.pivot.goods_num}}</span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="wx_order_num" label="订单编号" width="150">
        </el-table-column>
        <el-table-column prop="user.nickname" label="用户昵称" width="130">
        </el-table-column>
        <el-table-column prop="user.phone" label="用户电话" width="130">
        </el-table-column>
        <el-table-column prop="user.type" :formatter="userType" label="用户级别" width="80">
        </el-table-column>
        <el-table-column prop="actual_price" label="订单金额" width="80">
        </el-table-column>
        <el-table-column prop="total" label="折扣金额" width="80">
        </el-table-column>
        <el-table-column prop="type" label="支付方式" width="130">
        </el-table-column>
        <el-table-column prop="userinfo.default_address" label="用户地址" width="340">
        </el-table-column>
        <el-table-column prop="created_at" label="订单添加时间" width="180">
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button  @click="Alreadyorder(scope.row,scope.$index)" v-if="scope.row.status == 2" type="danger" plain>填写发货信息</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="cur"
        :page-size="pagesize"
        :page-count="currentPage4"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>

    <el-dialog title="发货处理" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="发货备注信息:" :label-width="formLabelWidth">
     <textarea class="text_ares" v-model="express" placeholder="可填写快递公司和快递编号等信息">
     </textarea>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ExpressHandling">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import  img from  "~/timg.jpg";
  export default {
    components: {},
    data(){
      return {
        img,
        urlimg: this.$IMG,
        salesman: '',//业务员
        pagesize: this.$store.state.attribute.page, //每页条数
        total: 1, //总条数
        currentPage4: 1, //总页数
        cur: 1, //当前页数
        loading2: true,
        Temporary: [],  //总数据
        datatitle: [],  //当页数据
        value4: '',
        Seeclass: [],
        fenleiflag: 1,
        imgarr: {},
        imgtext: "",
        rowindex: '',

        dialogFormVisible: false,
        formLabelWidth: '120px',
        express: '',//快递编号
        orderinfo: {},//订单信息
        orderIndex: 0,//订单位置
        Ordertype: 2,
      }
    },
    methods: {
      Alreadyorder(r, i){ //处理订单
        this.dialogFormVisible = true;
        this.orderinfo = r;
        this.orderIndex = i;
      },
//      export2Excel(){   //导出execl
//        var myDate = new Date();
//        let header = ['用户昵称', '用户电话', '订单总金额', '折扣金额', '支付方式', '用户地址', '订单添加时间'];
//        let val = ['user.nickname', 'user.phone', 'actual_price', 'total', 'type', 'userinfo.default_address', 'created_at'];
//        this.$h.exportexcel(header, val, this.datatitle, '商品信息' + myDate.toLocaleString());
//      },
      userType(row, column, cellValue){
        switch (row.user.type) {
          case 1:
            return '平台管理员';
            break;
          case 2:
            return '省级代理';
            break;
          case 3:
            return '一级代理';
            break;
          case 4:
            return '二级代理';
            break;
          case 5:
            return '普通用户';
            break;
          default:
            return '错误的用户等级';
        }
      },
      ExpressHandling(){ //确定 处理订单
        this.http.post({
          'api': 'editOrders',
          'data': {
            'data': {
              "orderid": this.orderinfo.id,
              "express": this.express,
            }
          },
        }).then((res) => {
          if (res.data.status_code == 200) {
            this.$notify({
              title: '处理成功',
              message: '订单信息' + res.data.data.express_number,
              type: 'success'
            });
            this.datatitle.splice(this.orderIndex, 1);
            this.dialogFormVisible = false;
          }
        }, (err) => {
          if (err) {
            this.$h.Ed(err, this);
          }
        })
      },
      handleCurrentChange(val) { //分页

        if (this.fenleiflag != 1) {
            this.loading2 = true;
          this.bodyaudh(val, this.Ordertype)
        }
      },
      bodyaudh(e, type) {
        this.Ordertype = type;
        this.http.post({
          'api': 'adminGetOrders',
          'data': {
            'data': {
              "status": type,
              "limit": this.pagesize,
            }
          },
          "page": e,
        }).then((res) => {
          this.shuju(res.data);
          this.fenleiflag = 0;
        }, (err) => {
          if (err) {
            this.$h.Ed(err, this);
          }
        })
      },
      shuju(data) {
        this.loading2 = false;
        this.total = data.total; //数据总的条数
        this.currentPage4 = data.last_page;
        this.datatitle = data.data;
      },
    },
    watch: {},
    computed: {
      //计算属性
    },
    mounted(){
      this.bodyaudh(1, 2);
      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }



  .text_ares {
    width: 86%;
    height: 219px;
    margin-top: 11px;
  }

  .allith2 {
    background: #090404;
    float: right;
    /*margin-top: 15px;*/
  }

  .height_gao {
    height: 100%;
  }

  .header_top {
    height: 60px;
    width: 100%;
  }
</style>
